@import "../../asset/style/common";

.star-line{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 20px;
  vertical-align: top;
  background-image: url("../../asset/images/comment-star/star5-white.png");
  //pre-load the img to void blinking
  background-size: 0;
  background-color: #ccc;
  &:hover .star-detail{
    display: block;
    z-index: 9;
  }
  .star-base{
    width: 20%;
    background-color: #e9313c;
    height: 100%;
  }
  .star-cover{
    position: absolute;
    left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../asset/images/comment-star/star5.png");
    background-size: 100% 100%;
    z-index: 1;
    &.white{
      background-image: url("../../asset/images/comment-star/star5-white.png");
    }
  }

  .star-detail{
    position: absolute;
    top: 20px;
    display: none;
    left: -150px;
    height:262px;
    width: 400px;
    padding: 30px;
    background-image: url("../../asset/images/comment-star/comment-frame.png");
    box-sizing: border-box;
    h2{
      border-bottom: 1px solid #e7e7e7;
      padding-bottom: 20px * $scale;
    }
    .star-detail-line{
      padding: 15px * $scale 0 8px * $scale 0;
      overflow: hidden;
      >span{
        vertical-align: middle;
        color: #959595;
      }
      >.star-line{
        float: right;
      }
    }
  }
}